<template>
  <div id="app">
    <!-- 方法一：使用组件的方式实现路由切换 -->
    <router-link to="/home" tag="li" replace >首页</router-link>
    <router-link :to="{
      path:'/mine/'+userId,//params
      query:{
        name:'xyz',
        age:12,
        height:180
      }
    }" tag="li" replace >我的</router-link>
    <keep-alive include="mine">
      <router-view></router-view>
    </keep-alive>
    

    <!-- 方法二：通过js代码切换路由 -->
    <!-- <button @click="goHome">首页</button>
    <button @click="goMine">我的</button>
    <router-view></router-view> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      userId: 456,
    };
  },
  methods: {
    goHome() {
      // this.$router.push("/home");
      this.$router.replace("/home");
    },
    goMine() {
      // this.$router.push("/mine");
      let pm = this.$router.replace({
        path: "/mine/" + this.userId, //params
        query: {
          name: "xyz",
          age: 12,
          height: 180,
        },
      });
      // console.log(this.$router);

      // console.log(this.$router);
      // console.log(this.$route);

      // 方法一：
      // let pm=this.$router.replace("/mine").catch(()=>{});

      // 方法二：
      // this.$router.replace({
      //   path:"/mine"
      // },()=>{});

      // 方法三：修改原型方法  VueRouter.prototype.push
    },
  },
 

};
</script>

<style>
.router-link-active {
  color: red;
}
.active {
  background-color: aqua;
}
</style>
